<!-- 弹窗 -->
<template>
    <div v-if="modelValue" class="dialog-mask">
        <div class="dialog">
            <div class="header">
                <slot name="header"></slot>
                <div>标题--{{ title }}</div>
                <div @click="close">关闭</div>
            </div>
            <div class="main">
                <div v-for="(item, index) in datas" :key="index">
                    <slot :index="index" :datas="item"></slot>
                </div>
            </div>
            <div class="footer">
                <slot name="footer"></slot>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>import { reactive } from 'vue'

type names = {
    name:string,
    age:number
}

const datas = reactive<names[]>([
    {
        name: '你好',
        age: 10,
    },
    {
        name: '你好a ',
        age: 20,
    },
    {
        name: '你好b',
        age: 30,
    },
    {
        name: '你好c',
        age: 40,
    },
])

type Props = {
    modelValue: boolean,
    title: string,
    modelModifiers?:{ // modelModifiers 为自定义参数
        test: boolean
    },
    titleModifiers?:{
        test:boolean
    }
}

const props = defineProps<Props>()

const emit = defineEmits(['update:modelValue', 'update:title'])

const close = () => {
    console.log(props.modelModifiers)

    if (props.modelModifiers?.test) {
        emit('update:title', '你是嘻嘻嘻')
    } else {
        emit('update:title', '你是哈哈哈')
    }
        
    emit('update:modelValue', false)
}

</script>

<style lang='less' scoped>
.dialog-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .8);

    .dialog {
        width: 400px;
        height: 600px;
        border-radius: 10px;
        overflow: hidden;
        background-color: #fff;

        .header {
            width: 100%;
            height: 100px;
            position: relative;

            &::after {
                position: absolute;
                width: 100%;
                height: 1px;
                content: '';
                left: 0;
                bottom: 0;
                background-color: #b2b2b2;
            }
        }

        .main {
            width: 100%;
            height: 400px;
        }

        .footer {
            width: 100%;
            height: 100px;
        }
    }
}

</style>